layui分页page=true容易踩的坑 |
您所在的位置：网站首页 › layui 分页表格 › layui分页page=true容易踩的坑 |
layui分页page=true容易踩的坑
|
前台代码： @{ ViewBag.Title = "layuiTest"; } Layui 搜索ID： 搜索 layui.use('laypage', function () { var laypage = layui.laypage; var data = [ '北京', '上海', '广州', '深圳', '杭州', '长沙', '合肥', '宁夏', '成都', '西安', '南昌', '上饶', '沈阳', '济南', '厦门', '福州', '九江', '宜春', '赣州', '宁波', '绍兴', '无锡', '苏州', '徐州', '东莞', '佛山', '中山', '成都', '武汉', '青岛', '天津', '重庆', '南京', '九江', '香港', '澳门', '台北' ]; //执行一个laypage实例 laypage.render({ elem: 'test1' //注意，这里的 test1 是 ID，不用加 # 号 , count: data.length //数据总数，从服务端得到 , theme: '#062EFB' //自定义主题。支持传入：颜色值，或任意普通字符 theme: 'xxx' / , hash: 'fenye' //自定义hash值 , limits: [14, 30, 20, 10, 60]//每页条数的选择项。如果 layout 参数开启了 limit，则会出现每页条数的select选择框 , layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'] , groups: 5 , curr: 5 , count: 999564 , jump: function (obj, first) { //obj包含了当前分页的所有参数，比如： // console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。 //console.log(obj.limit); //得到每页显示的条数 //模拟渲染 document.getElementById('biuuu_city_list').innerHTML = function () { var arr = [] , thisData = data.concat().splice(obj.curr * obj.limit - obj.limit, obj.limit); console.log(data); console.log(obj.curr * obj.limit - obj.limit); console.log( obj.limit); console.log(thisData); layui.each(thisData, function (index, item) { console.log(index, item); arr.push('' + item + ''); }); return arr.join(''); }(); //首次不执行 if (!first) { //do something } } }); }); layui.use('table', function () { var table = layui.table; table.render({ elem: '#LAY_table_user' , url: '/test/getlayuiData2/' , cols: [[ { checkbox: true, fixed: true } , { field: 'id', title: 'ID', width: 80, sort: true, fixed: true } , { field: 'username', title: '用户名', width: 80 } , { field: 'sex', title: '性别', width: 80, sort: true } , { field: 'city', title: '城市', width: 80 } , { field: 'sign', title: '签名' } , { field: 'experience', title: '积分', sort: true, width: 80 } , { field: 'score', title: '评分', sort: true, width: 80 } , { field: 'classify', title: '职业', width: 80 } , { field: 'wealth', title: '财富', sort: true, width: 135 } ]] , id: 'testReload' , page: true , height: 310 }); var $ = layui.$, active = { reload: function () { var demoReload = $('#demoReload'); //执行重载 table.reload('testReload', { page: { curr: 1 //重新从第 1 页开始 } , where: { key: { id: demoReload.val() } } }, 'data'); } }; $('.demoTable .layui-btn').on('click', function () { var type = $(this).data('type'); active[type] ? active[type].call(this) : ''; }); });后端代码： public string getlayuiData2(int ? page=1,int ? limit=10) { string serviceUrl = string.Format("https://www.layui.com/demo/table/user/?page= {0}&limit={1}", page, limit); RestClient client = new RestClient(serviceUrl); string strurl = client.Get(serviceUrl); return strurl; }这里需要一个http转网页方法： using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Net; using System.Text; namespace WX_Card.CardUtility.Tool { public class RestClient { private string BaseUri; public RestClient(string baseUri) { this.BaseUri = baseUri; } #region Delete方式 public string Delete(string data, string uri) { return CommonHttpRequest(data, uri, "DELETE"); } public string Delete(string serviceUrl) { //Web访问对象64 // string serviceUrl = string.Format("{0}/{1}", this.BaseUri, uri); HttpWebRequest myRequest = (HttpWebRequest)WebRequest.Create(serviceUrl); myRequest.Method = "DELETE"; // 获得接口返回值68 HttpWebResponse myResponse = (HttpWebResponse)myRequest.GetResponse(); StreamReader reader = new StreamReader(myResponse.GetResponseStream(), Encoding.UTF8); //string ReturnXml = HttpUtility.UrlDecode(reader.ReadToEnd()); string ReturnXml = reader.ReadToEnd(); reader.Close(); myResponse.Close(); return ReturnXml; } #endregion #region Put方式 public string Put(string data, string uri) { return CommonHttpRequest(data, uri, "PUT"); } #endregion #region POST方式实现 public string Post(string data, string uri) { return CommonHttpRequest(data, uri, "POST"); } public string CommonHttpRequest(string data, string serviceUrl, string type) { //Web访问对象，构造请求的url地址 // string serviceUrl = string.Format("{0}/{1}", this.BaseUri, uri); //构造http请求的对象 HttpWebRequest myRequest = (HttpWebRequest)WebRequest.Create(serviceUrl); //转成网络流 byte[] buf = System.Text.Encoding.GetEncoding("UTF-8").GetBytes(data); //设置 myRequest.Method = type; myRequest.ContentLength = buf.Length; myRequest.ContentType = "application/json"; myRequest.MaximumAutomaticRedirections = 1; myRequest.AllowAutoRedirect = true; // 发送请求 Stream newStream = myRequest.GetRequestStream(); newStream.Write(buf, 0, buf.Length); newStream.Close(); // 获得接口返回值 HttpWebResponse myResponse = (HttpWebResponse)myRequest.GetResponse(); StreamReader reader = new StreamReader(myResponse.GetResponseStream(), Encoding.UTF8); string ReturnXml = reader.ReadToEnd(); reader.Close(); myResponse.Close(); return ReturnXml; } /// /// post调用网页是否验证成功 /// /// /// /// public static string GetFormWebServiceByPOST(string RequestPara, string Url) { WebRequest hr = HttpWebRequest.Create(Url); byte[] buf = System.Text.Encoding.GetEncoding("utf-8").GetBytes(RequestPara); hr.ContentType = "application/x-www-form-urlencoded"; hr.ContentLength = buf.Length; hr.Method = "POST"; System.IO.Stream RequestStream = hr.GetRequestStream(); RequestStream.Write(buf, 0, buf.Length); RequestStream.Close(); System.Net.WebResponse response = hr.GetResponse(); StreamReader reader = new StreamReader(response.GetResponseStream(), Encoding.GetEncoding("utf-8")); string ReturnVal = reader.ReadToEnd(); reader.Close(); response.Close(); return ReturnVal; } #endregion #region GET方式实现 已认证成功 public string Get(string serviceUrl) { //Web访问对象64 // string serviceUrl = string.Format("{0}/{1}", this.BaseUri, uri); //构造一个Web请求的对象 HttpWebRequest myRequest = (HttpWebRequest)WebRequest.Create(serviceUrl); // 获得接口返回值68 //获取web请求的响应的内容 HttpWebResponse myResponse = (HttpWebResponse)myRequest.GetResponse(); //通过响应流构造一个StreamReader StreamReader reader = new StreamReader(myResponse.GetResponseStream(), Encoding.UTF8); //string ReturnXml = HttpUtility.UrlDecode(reader.ReadToEnd()); string ReturnXml = reader.ReadToEnd(); reader.Close(); myResponse.Close(); return ReturnXml; } /// /// 通过GET方式去获取信息。（post调用网页是否验证成功【已成功调用】） /// /// /// /// public string GetFormWebServiceByGet(string _url) { WebRequest _request = WebRequest.Create(_url); _request.Method = "GET"; WebResponse _response = _request.GetResponse(); StreamReader _reader = new StreamReader(_response.GetResponseStream(), Encoding.UTF8); string _str = _reader.ReadToEnd(); _reader.Close(); _response.Close(); return _str; } #endregion } }输出结果：
任意点击数据是变幻的：
重要提示：看后台代码的page，limit，前台显示不出来的，需要调：
|
【本文地址】
今日新闻 |
推荐新闻 |